<template>
  <div class="zj-home">
    <!--  搜索  -->
    <van-search
        class="home-search"
        v-model="searchCtt"
        label="商品名"
        placeholder="请输入商品名关键词"
        disabled
        @click="$router.push('/goods')"
    >
      <template #left>
        <div class="search-logo"/>
      </template>
    </van-search>
    <div class="home-main">
      <ZJScrollView :wrapperInfo="scrollWrapperInfo" :wrapperConfig="{click: true}" ref="scrollViewRef">
        <template #content>
          <!--  轮播  -->
          <ZJSwiper :autoplay="3000" :swiperConfig="swiperConfig" :swiperItems="swiperItems"/>
          <div class="goods-show">
            <!--  金刚区  -->
            <div class="king-kong-area">
              <template v-for="item in kingKongSvgItems" :key="item.key">
                <div class="area-item">
                  <div class="item-img">
                    <img :src="item.imgUrl" alt="kingkong_img">
                  </div>
                  <span class="item-word">{{ item.word }}</span>
                </div>
              </template>
            </div>
            <!--   广告投放处   -->
            <div class="ad-wrapper">
              <img src="../../assets/images/other_ad1.jpg" alt="">
            </div>
            <!--   会员特享权益   -->
            <div class="vip-wrapper">
              <ZJTitle/>
              <div class="wrapper-content">
                <template v-for="item in vipSvgItems" :key="item.key">
                  <div class="content-item">
                    <div class="item-icon">
                      <img :src="item.imgUrl" alt="vip"/>
                    </div>
                    <div class="item-word-wrapper">
                      <p class="word-title">{{ item.mainTitle }}</p>
                      <p class="word-tip">{{ item.subTitle }}</p>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <!--      排行榜      -->
            <template v-for="item in rankConfigList">
              <HomeRank v-bind="item"/>
            </template>
          </div>
          <!--          <div class="empty-block"></div>-->
        </template>
      </ZJScrollView>
    </div>
  </div>
</template>

<script setup lang="ts">

import {nextTick, onActivated, ref} from "vue";
import ZJSwiper from "@/components/ZJSwiper/ZJSwiper.vue";
import {swiperItems, swiperConfig, kingKongSvgItems, vipSvgItems, rankInfo, scrollWrapperInfo} from "./config"
import ZJTitle from "@/components/ZJTitle/ZJTitle.vue";
import ZJScrollView from "@/components/ZJScrollView/ZJScrollView.vue";
import HomeRank from "@/views/ZJHome/HomeRank/HomeRank.vue";

const searchCtt = ref("")
const scrollViewRef = ref<InstanceType<typeof ZJScrollView>>()
// 处理三个推荐榜的显示
const rankConfigList = ref()
onActivated(async () => {
  rankConfigList.value = await rankInfo()
  setTimeout(() => {
    if (scrollViewRef.value?.bs) {
      scrollViewRef.value.bs.refresh()
    }
  })
})
</script>

<style scoped lang="less">
@import "src/assets/css/variable";
@import "src/assets/css/mixins";

.zj-home {
  height: 100%;

  .home-search {
    height: 50px;
    background-color: @theme-color;
    padding: 0 16px;
    .search-logo {
      width: 30px;
      height: 30px;
      position: relative;

      &::after {
        content: "";
        width: 100%;
        height: 100%;
        left: -5px;
        top: -0px;
        position: absolute;
        background: url('../../assets/images/search_logo.png') no-repeat center center;
        background-size: 150% 150%;
      }
    }
  }

  .home-main {
    height: calc(100% - 50px);
    overflow: hidden;

    .goods-show {
      padding: 10px;

      .king-kong-area {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        background-color: #fff;
        border-radius: 10px;
        padding: 8px 8px 0 8px;
        margin-bottom: 10px;

        .area-item {
          width: 20%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 8px;

          .item-img {
            width: 50px;
            height: 50px;
            border-radius: 20px;
            margin-bottom: 8px;

            img {
              width: 100%;
              height: 100%;
              border-radius: 8px;
            }
          }

          .item-word {
            font-size: 14px;
          }
        }
      }

      .ad-wrapper {
        height: 130px;
        margin-bottom: 16px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }

      .vip-wrapper {
        margin-bottom: 10px;

        .wrapper-content {
          display: flex;
          justify-content: space-between;

          .content-item {
            flex: 1;
            height: 100px;
            background-color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            & + .content-item {
              margin-left: 6px;
            }

            .item-icon {
              width: 40px;
              height: 40px;

              img {
                width: 100%;
                height: 100%;
                border-radius: 8px;
              }
            }

            .item-word-wrapper {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-top: 8px;

              .word-title {
                font-size: 14px;
                font-weight: 600;
              }

              .word-tip {
                font-size: 12px;
                color: #999;
              }
            }
          }
        }
      }

      .rank-wrapper {
        margin-bottom: 6px;
      }
    }

    .empty-block {
      height: 60px;
    }
  }
}
</style>
